<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model.trim="form.processing_code" placeholder="加工单号" size="small" clearable style="width: 150px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.sku_code" placeholder="SKU" size="small" clearable style="width: 150px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.number" placeholder="唯一码Rfid" size="small" clearable style="width: 250px"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select size="small" v-model="form.brand_code" style="width: 100px" placeholder="选择品牌" clearable>
                        <el-option value="S" label="十三余"></el-option>
                        <el-option value="Y" label="有香"></el-option>
                        <el-option value="XM" label="一弦一木"></el-option>
                        <el-option value="J" label="锦瑟"></el-option>
                        <el-option value="Q" label="七月夕"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small"
                               :loading="btnLoading">查询
                    </el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="small">
                <el-table-column label="工厂名"  prop="factory_name" show-overflow-tooltip></el-table-column>
                <el-table-column label="加工单号" prop="processing_code" width="135"></el-table-column>
                <el-table-column label="SKU"  prop="sku_code" width="135"></el-table-column>
                <el-table-column label="款名"  prop="type_name" show-overflow-tooltip></el-table-column>
                <el-table-column label="款号"  prop="type_no" width="120"></el-table-column>
                <el-table-column label="颜色编码"  prop="color_code" width="80"></el-table-column>
                <el-table-column label="尺码编码"  prop="size_code" width="80"></el-table-column>
                <el-table-column label="导入时间"  prop="createtime" width="135"></el-table-column>
                <el-table-column label="已打印/总数" prop="num">
                    <template slot-scope="{ row }">
                        <span style="font-size: 16px;font-weight: bold">{{ row.dayin_num }}</span> /
                        <span style="font-size: 16px;font-weight: bold">{{row.num + row.yichu_num }}</span>
                        <span style="margin-left: 4px;color: #909399">
                            {{ row.num }}+<span style="color: red">{{ row.yichu_num }}</span>(溢{{Number(row.overflow) * 100}}%)
                        </span>
                    </template>
                </el-table-column>
<!--                <el-table-column label="增裁"  prop="lou_num" width="80"></el-table-column>-->
                <el-table-column label="操作"  fixed="right" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="lookBtn(scope.row)" size="small">查看</el-button>
<!--                        <el-button type="text" @click="" size="small">作废补码</el-button>-->
<!--                        <el-button type="text" size="small" v-if="![5, 6].includes(scope.row.source_type)" @click="">增裁补码</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>

        <!--rfid列表-->
        <el-drawer title="RFID明细" :visible.sync="rfidVisible" size="900px" direction="rtl" :wrapperClosable="false">
            <el-col :span="24" style="padding: 0 8px;">
                <el-form inline>
                    <el-form-item>
                        <el-input v-model.trim="rfidForm.number" placeholder="rfid编码" size="small" clearable style="width: 250px"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="rfidForm.status" size="small" style="width: 150px" clearable>
                            <el-option v-for="(item, index) in rfidStatus" :key="index" :value=item.value :label="item.label"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="el-icon-search" @click="searchRfidBtn" size="small" :loading="rfidBtnLoading">查询</el-button>
                    </el-form-item>
                    <el-form-item style="float: right">
                        <el-button plain type="primary" class="el-icon-plus" @click="rfidAddVisible=true" size="small" :loading="rfidBtnLoading">补码</el-button>
                        <el-button plain type="danger" class="el-icon-delete" @click="rfidDelVisible=true" size="small" :loading="rfidBtnLoading">作废</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="24" style="padding: 0 8px;">
                <el-form inline label-width="70px" label-position="right">
                    <el-form-item label="加工单:">
                        <span style="font-weight: bold">{{rfidForm.processing_code}}</span>
                    </el-form-item>
                    <el-form-item label="SKU:">
                        <span style="font-weight: bold">{{rfidForm.sku_code}}</span>
                    </el-form-item>
                    <el-form-item label="未打印:">
                        <span style="font-weight: bold;color:#909399;">{{rfidCountData.unPrintNum || 0}}</span>
                    </el-form-item>
                    <el-form-item label="已打印:">
                        <span style="font-weight: bold;color: #409EFF">{{rfidCountData.printNum || 0}}</span>
                    </el-form-item>
                    <el-form-item label="待入库:">
                        <span style="font-weight: bold;color: #E6A23C">{{rfidCountData.unWmsNum || 0}}</span>
                    </el-form-item>
                    <el-form-item label="已入库:">
                        <span style="font-weight: bold;color:#67C23A;">{{rfidCountData.wmsNum || 0}}</span>
                    </el-form-item>
                    <el-form-item label="作废:">
                        <span style="font-weight: bold;color: #F56C6C">{{rfidCountData.invalidNum || 0}}</span>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="24" style="padding: 0 8px;">
                <el-table :data="rfidData" style="width: 100%" :max-height="drawerTableHeight" v-loading="rfidLoading" size="small">
                    <el-table-column label="流水号"  prop="s_number" width="150"></el-table-column>
                    <el-table-column label="RFID编码" prop="number"></el-table-column>
                    <el-table-column label="状态"  prop="status" width="130">
                        <template slot-scope="{row}">
                            <el-tag v-if="row.status == 0" size="mini" type="info">未打印</el-tag>
                            <el-tag v-else-if="row.status == 1" size="mini">已打印</el-tag>
                            <el-tag v-else-if="row.status == 2 || row.status == 3" size="mini" type="warning">待入库</el-tag>
                            <el-tag v-else-if="row.status == 4" size="mini" type="success">已入库</el-tag>
                            <el-tag v-else-if="row.status == 11" size="mini" type="danger">作废</el-tag>
                            <el-tag v-else  size="mini">{{row.status}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作"  fixed="right" width="190">
                        <template slot-scope="scope">
                            <el-popover placement="left" width="300" trigger="click">
                                <el-col :span="24" style="ont-size: 16px;font-weight: 400">
                                    <el-timeline>
                                        <el-timeline-item v-for="(item, index) in lineList" :key="index" :timestamp="item.timestamp" :type="item.type">{{ item.content }}</el-timeline-item>
                                    </el-timeline>
                                </el-col>
                                <el-button slot="reference" type="text" size="small" class="el-icon-view" :loading="scope.$index==selectIndex && lookRfidLoading"
                                           @click="lookRfidBtn(scope.$index, scope.row.number)">&nbsp;查看</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
                <!--翻页栏-->
                <div style="margin-top: 4px;overflow: hidden;float: right">
                    <Page :total="rfidTotal" :current="rfidPage" :page-size="limit" show-total @on-change="rfidPageChange"></Page>
                </div>
            </el-col>
        </el-drawer>

        <!--补码-->
        <el-dialog title="生成RFID" :visible.sync="rfidAddVisible" width="600px" :close-on-click-modal="false">
            <el-row>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">加工单：</el-col>
                    <el-col :span="15" class="ellipsis">{{rfidForm.processing_code}}</el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">SKU：</el-col>
                    <el-col :span="15" class="ellipsis">{{rfidForm.sku_code}}</el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">款名：</el-col>
                    <el-col :span="15" class="ellipsis">{{rfidForm.type_name}}</el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">款号：</el-col>
                    <el-col :span="15">{{rfidForm.type_no}}</el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">颜色编码：</el-col>
                    <el-col :span="15">{{rfidForm.color_code || "/"}}</el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">尺码编码：</el-col>
                    <el-col :span="15">{{rfidForm.size_code || "/"}}</el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">可补数量：</el-col>
                    <el-col :span="15" style="color: #ff7171;font-weight: bold">{{rfidForm.kebu_num || 0}}</el-col>
                </el-col>
                <el-col :span="24" style="margin-top: 20px">
                    <el-input v-model.trim="rfidForm.addNum" size="small" type="number" placeholder="请输入生成RFID的数量"></el-input>
                </el-col>
            </el-row>
            <div slot="footer">
                <el-button @click="rfidAddVisible = false" size="small" plain>取 消</el-button>
                <el-button type="primary" @click="addRfidBtn" :loading="rfidAddLoading" size="small">确 定</el-button>
            </div>
        </el-dialog>

        <!--作废-->
        <el-dialog title="作废" :visible.sync="rfidDelVisible" width="600px" :close-on-click-modal="false">
            <el-row>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">加工单：</el-col>
                    <el-col :span="15" class="ellipsis">{{rfidForm.processing_code}}</el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">SKU：</el-col>
                    <el-col :span="15" class="ellipsis">{{rfidForm.sku_code}}</el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">款名：</el-col>
                    <el-col :span="15" class="ellipsis">{{rfidForm.type_name}}</el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">款号：</el-col>
                    <el-col :span="15">{{rfidForm.type_no}}</el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">颜色编码：</el-col>
                    <el-col :span="15">{{rfidForm.color_code || "/"}}</el-col>
                </el-col>
                <el-col :span="8">
                    <el-col :span="9" style="text-align: right">尺码编码：</el-col>
                    <el-col :span="15">{{rfidForm.size_code || "/"}}</el-col>
                </el-col>
                <el-col :span="24" style="margin-top: 20px">
                    流水号：
                    <el-input v-model.trim="rfidForm.delSNum_1" size="small" type="number" style="width: 40%" placeholder="请输入起始流水号"></el-input>
                    ---
                    <el-input v-model.trim="rfidForm.delSNum_2" size="small" type="number" style="width: 40%" placeholder="请输入终止流水号"></el-input>
                </el-col>
            </el-row>
            <div slot="footer">
                <el-button @click="rfidDelVisible = false" size="small" plain>取 消</el-button>
                <el-button type="primary" @click="delRfidBtn" :loading="rfidDelLoading" size="small">确 定</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>

import {rfidAdd, rfidCount, rfidDel, rfidList, rfidPrintList, rfidSearch} from "@/api/produce/rfid";

export default {
    name: "produce_rfid_print",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form:{processing_code: "", sku_code: "", number: "", brand_code: "S"},
            selectedData: [],

            rfidBtnLoading: false,
            rfidVisible: false,
            rfidPage: 1,
            rfidLimit: 20,
            rfidTotal: 0,
            rfidData: [],
            rfidForm: {},
            rfidLoading: false,
            drawerTableHeight: window.innerHeight - 230+"px",
            rfidStatus: [{value:0, label:"未打印"},{value:1, label:"已打印"},{value:23, label:"待入库"},{value:4, label:"已入库"},{value:11, label:"作废"}],
            rfidCountData: {},

            lookRfidLoading: false,
            lineList: [],

            rfidAddVisible: false,
            rfidAddLoading: false,
            rfidDelVisible: false,
            rfidDelLoading: false,
        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        searchRfidBtn(){
            this.rfidPage = 1;
            this.getRfidData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        rfidPageChange(page){
            this.rfidPage = page;
            this.getRfidData();
        },
        //获取数据
        getData() {
            let param = {
                page: this.page,
                limit: this.limit
            };
            if(this.form.processing_code){
                param.processing_code = this.form.processing_code;
            }
            if(this.form.sku_code){
                param.sku_code = this.form.sku_code;
            }
            if(this.form.number){
                param.number = this.form.number;
            }
            if(this.form.brand_code){
                param.brand_code = this.form.brand_code;
            }
            this.loading = true;
            rfidPrintList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
        //获取rfid数据
        getRfidData(){
            let param = {
                page: this.rfidPage,
                limit: this.rfidLimit,
                status: this.rfidForm.status,
                processing_code: this.rfidForm.processing_code,
                sku_code: this.rfidForm.sku_code
            };
            if(this.rfidForm.number){
                param.number = this.rfidForm.number;
            }
            this.rfidBtnLoading = true;
            this.rfidLoading = true;
            rfidList(param).then((res) =>{
                this.rfidLoading = false;
                this.rfidBtnLoading = false;
                this.rfidData = res.data.data;
                this.rfidTotal = res.data.total;
            })
        },
        //rfid统计
        rfidStatistic(){
            let param = {
                processing_code: this.rfidForm.processing_code,
                sku_code: this.rfidForm.sku_code
            };
            rfidCount(param).then((res) =>{
                this.rfidCountData = res.data;
            })
        },
        //查看rfid唯一码明细
        lookBtn(row){
            this.rfidForm = Object.assign({status: 0}, row);
            this.rfidVisible = true;
            this.searchRfidBtn();
            this.rfidStatistic();
        },
        //查看rfid流程
        lookRfidBtn(index, number){
            this.lineList = [];
            this.selectIndex = index;
            this.lookRfidLoading = true;
            rfidSearch({number: number}).then((res) =>{
                this.lookRfidLoading = false;
                if(res.data.createtime){
                    this.lineList.push({content: '生成', timestamp: res.data.createtime, type: 'info'});
                }
                if(res.data.printing_time){
                    this.lineList.push({content: '打印', timestamp: res.data.printing_time, type: 'info'});
                }
                res.data.list.forEach(item =>{
                    let user = item.qt_user ? item.qt_user : item.qc_user;
                    let status = item.status ? "合格" : "不合格";
                    let reason_title = item.reason_title ? "："+item.reason_title : "";
                    let type = item.qt_user ? "仓检员" : "QC质检员";
                    this.lineList.push({
                        content: `${type}（${user}）：已检（${status}${reason_title}）`,
                        timestamp: item.qc_time,
                        type: 'primary'});
                });
                if(res.data.status == 4 && res.data.ware_time){
                    this.lineList.push({content: '入库', timestamp: res.data.ware_time, type: 'success'});
                }
            }).catch(()=>{
                this.lookRfidLoading = false;
            })
        },
        //新增rfid码
        addRfidBtn(){
            this.rfidAddLoading = true;
            rfidAdd({processing_code:this.rfidForm.processing_code, sku_code: this.rfidForm.sku_code, num: this.rfidForm.addNum}).then((res) => {
                this.rfidAddLoading = false;
                if(res.code === 0){
                    this.$message.success("补码成功");
                    this.getRfidData();
                    this.rfidStatistic();
                    this.rfidAddVisible = false;
                }else{
                    this.$message.error(res.msg);
                }
            }).catch(()=>{
                this.rfidAddLoading = false;
            })
        },
        //作废rfid码
        delRfidBtn(){
            this.$confirm("此操作将作废该流水号, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.rfidDelLoading = true;
                let obj = {
                    processing_code:this.rfidForm.processing_code,
                    sku_code: this.rfidForm.sku_code,
                    num_1: this.rfidForm.delSNum_1,
                    num_2:this.rfidForm.delSNum_2
                };
                rfidDel(obj).then((res) =>{
                    this.rfidDelLoading = false;
                    if(res.code === 0){
                        this.$message.success("作废成功");
                        this.getRfidData();
                        this.rfidStatistic();
                        this.rfidDelVisible = false;
                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(() =>{
                    this.rfidDelLoading = false;
                })
            }).catch(() => {

            });
        },
    },
    mounted() {
        this.searchBtn();
    }
}
</script>

<style scoped>
.ellipsis {
    overflow: hidden; /* 确保超出容器的内容被裁剪 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>
